<template>
  <div class="main">
    <div class="title">收银系统</div>
    <div class="root">
      <div class="sell">
        <div class="goods">
          <div>
            <div class="good">
              <div class="good_col small_col">序号</div>
              <div class="good_col  big_col">商品码</div>
              <div class="good_col big_col">商品</div>
              <div class="good_col">原价</div>
              <div class="good_col">成交价</div>
              <div class="good_col small_col">特价</div>
              <div class="good_col">数量</div>
            </div>
            <div class="good" v-for="good_item in this.goods" :key="good_item.index">
              <div class="good_col small_col">{{good_item.index}}</div>
              <div class="good_col  big_col">{{good_item.bar_code}}</div>
              <div class="good_col big_col">{{good_item.name}}</div>
              <div class="good_col">{{good_item.original_price}}</div>
              <div class="good_col">{{good_item.deal_price}}</div>
              <div class="good_col small_col" v-if="good_item.use_special_price">是</div>
              <div class="good_col small_col" v-else>否</div>
              <div class="good_col"><input class="my_input" type="number" v-model="good_item.count" @change="count_change(good_item)"></div>
              <div class="good_col small_col" style="margin-left: 5px"><div class="remove_good" @click="remove_good(good_item.index)">移除</div></div>
            </div>
          </div>
        </div>
        <div class="sumary">
          <div class="total_price"><div>总价:{{this.total_price}}</div></div>
          <div class="pay_space">

            <div class="pay_buttom" @click="buy()">结账</div>
          </div>
        </div>
      </div>
      <div class="add">
        <div class="input_code">
          <div>
            <div class="input_area"><div class="label">商品码</div><input class="my_input_plus" v-model="bar_code_buf"></div>
          <div class="input_area"><div class="label">上架ID</div><input class="my_input_plus" v-model="shelf_id_buf"></div>
<!--          <div class="input_area"><div class="label">进货ID</div><input class="my_input_plus" v-model="order_number_buf"></div>-->
          <div class="input_area"><button class="my_buttom" @click="add_good()">添加</button></div>
          </div>
        </div>
        <div class="scan_code">
          <div class="scan_buttom">
            <button class="my_buttom" style="height: 60px" @click="scan_code()">扫描商品二维码</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import sellService from '../../service/apirla/sell'
  export default {
    name: 'Sell',
    data () {
      return {
        goods: [
          // {
          //   index: 1,
          //   bar_code: '6900873024377',
          //   name: 'beat耳机',
          //   order_number: 1,
          //   shelf_id: 1,
          //   count: 1,
          //   deal_price: 899,
          //   original_price: 999,
          //   special_price: 899,
          //   use_special_price: true
          // },
          // {
          //   index: 2,
          //   bar_code: '6900873024378',
          //   name: '索尼耳机',
          //   order_number: 1,
          //   shelf_id: 1,
          //   count: 1,
          //   deal_price: 899,
          //   original_price: 999,
          //   special_price: 899,
          //   use_special_price: true
          // }
        ],
        bar_code_buf: '',
        shelf_id_buf: '',
        order_number_buf: '',
        good_buf: null,
        store_id:1
      }
    },
    async mounted () {
    },
    computed: {
      total_price: function () {
          var sum = 0
          if (this.goods == null) {
            this.goods = []
          }
          for (var var1 = 0 ; var1 < this.goods.length ; var1 ++ ) {
            if (this.goods[var1].count < 0 || this.goods[var1].deal_price < 0 || this.goods[var1].count == null || this.goods[var1].deal_price == null){
              continue
            }
            sum += (this.goods[var1].deal_price * this.goods[var1].count)
          }
          return sum
      }
    },
    methods: {
      remove_good (index) {
        if (index < 1 || index > this.goods.length) {
          return
        }
        for (var i = index; i < this.goods.length; i++) {
          this.goods[i].index -= 1
        }
        this.goods.splice(index-1,1)
      },
      async add_good () {
        // 添加购买物品
        if (await this.can_add(this.bar_code_buf,this.shelf_id_buf,this.order_number_buf)){
            // 可以添加后，从缓存区取到数据
            // todo
          var data = Object.assign({},this.good_buf)
          // 先看看有没有相同商品，如果有，count+1
          for (var var1 = 0 ; var1 < this.goods.length ; var1 ++) {
            if (this.good_equal(this.goods[var1], data)){
              this.goods[var1].count += 1
              return
            }
          }
          data.count = 1
          data.index = this.goods.length + 1
          this.goods.push(data)
        }
      },
      async can_add (bar_code,shelf_id,order_number) {
        // 发送ajax向后端查询，查询成功后拿到商品信息，存放在缓存区
        // 若库存不足或不存在该信息，返回false
        // todo
        let result = await sellService.getCommodity(this.store_id,bar_code,shelf_id,order_number)
        console.log(result)
        if (result != null){
          if (result.data != null && result.data != ""){
            this.good_buf = result.data
            return true
          }else {
            alert("库存不足")
            return false
          }
        }else {
          alert("网络错误")
        }
        return false
      },
      good_equal(good_obj1,good_obj2) {
        return good_obj1.order_number == good_obj2.order_number && good_obj1.shelf_id == good_obj2.shelf_id && good_obj1.bar_code == good_obj2.bar_code
      },
      count_change(good_obj) {
        if (good_obj.count <= 0){
          if (confirm("移除此商品?")){
            this.remove_good(good_obj.index)
          }else {
            good_obj.count = 1
          }
        }
      },
      async scan_code () {
        // 模拟扫描二维码获取商品信息
        // todo 后续需要后端支持
        let result = await sellService.getRandomCommodity(this.store_id)
        console.log(result)
        if (result != null){
          if (result.data != null && result.data != ""){
            this.good_buf = result.data
          }else {
            alert("没有货了！")
            return
          }
        }else {
          alert("网络错误")
          return
        }

        var data = Object.assign({},this.good_buf)
        // 先看看有没有相同商品，如果有，count+1
        for (var var1 = 0 ; var1 < this.goods.length ; var1 ++) {
          if (this.good_equal(this.goods[var1], data)){
            this.goods[var1].count += 1
            return
          }
        }
        data.count = 1
        data.index = this.goods.length + 1
        this.goods.push(data)
      },
      async buy(){
        if (this.goods.length < 1){
          alert("没有任何商品")
          return
        }
        if (!confirm("您即将提交订单?"))return
        var data = this.goods
        let result = await sellService.buy(this.store_id,data)
        console.log(result)
        if(result == null){
          alert("网络错误")
          return
        }else if (result.data.status == 1){
          alert("订单提交成功")
          // 清扫页面
          this.goods = []
          this.good_buf = null
          this.order_number_buf = null
          this.bar_code_buf = null
          this.shelf_id_buf = null
        }else if (result.data.status == 2){
          for (var i = 0;i<result.data.lackIndexs.length;i++){
            alert("序号为{"+result.data.lackIndexs[i]+"}的货物库存不足")
          }
          for (var key in result.data.limitBuy){
            alert("序号为{"+key+'}的货物限购数为:'+result.data.limitBuy[key])
          }
        }else {
          alert("下单失败，请联系管理员")
        }
      }
    }
  }
</script>
<style>
  .main{
    width: 100%;
    height: 100%;
    background: white;
  }

  .sell {
    width: 700px;
    height: 600px;
    /*background: #60c1f6;*/
    box-shadow: 0px 0px 5px #888888;

  }

  .root {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add {
    width: 500px;
    height: 600px;
    /*background: yellow;*/
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-shadow: 0px 0px 5px #888888;

  }

  .title {
    padding: 0px;
    height: 80px;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
  }

  .sumary {
    width: 100%;
    height: 100px;
    /*background: #5ecc49;*/
    box-shadow: 0px 0px 5px #888888;
    display: flex;
    justify-content: space-between;
  }

  .good {
    display: flex;
    height: 40px;
  }

  .good_col {
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .big_col {
    width: 150px;
  }
  .small_col{
    width: 30px;
  }
  .my_input{
      width: 50px;
  }

  .remove_good {
    border-radius: 5px;
    border: 1px black solid;
  }

  .total_price {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
  }

  .pay_buttom {
    width: 40px;
    height: 25px;
    border: 1px black solid;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pay_space {
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .input_code {
    width: 100%;
    height: 300px;
    /*background: pink;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scan_code {
    width: 100%;
    height: 200px;
    /*background: purple;*/
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .input_area {
    display: flex;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
  }

  .input_buttom {
    width: 200px;/*设置按钮宽度*/
    height: 30px;/*设置按钮高度*/
  }

  .scan_buttom {

  }
  .my_buttom {
    width: 200px;/*设置按钮宽度*/
    height: 30px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:cornflowerblue;/*按钮背景颜色*/
    border-radius: 3px;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/
    margin: 0;
    outline: none;/*取消轮廓*/
    font-family: KaiTi;/*字体设置为楷体*/
    font-size: 17px;/*设置字体大小*/
    text-align: center;/*字体居中*/
    cursor: pointer;/*设置鼠标箭头手势*/
  }
  .my_input_plus{
    border: 1px solid #ccc;
    padding: 7px 0px;
    border-radius: 3px;
    padding-left:5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
  }
  .my_input_plus:focus{
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
  }

  .label {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
